
/* flex布局 */
.flex{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;
}
/* 主轴为垂直方向 */
.flex-column{
  -webkit-box-orient: vertical ;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
/* 主轴为水平方向  */
.flex-row{
  -webkit-box-orient: horizontal ;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

/* 交叉轴上顶端对齐 */
.flex-align-start{
  -webkit-align-items:flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items:flex-start;
}

/* 交叉轴上居中对齐 */
.flex-align-center{
  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}

/* 交叉轴上底端对齐 */
.flex-align-end{
  -webkit-align-items:flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items:flex-end;
}

/* 主轴上顶端对齐 */
.flex-pack-center{
  -webkit-box-pack: start;
  -webkit-justify-content:flex-start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

/* 主轴上居中 */
.flex-pack-center{
  -webkit-box-pack: center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

/* 主轴上两端对齐 */
.flex-pack-justify{
  -webkit-box-pack: justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
}

/* 主轴上底端对齐 */
.flex-pack-end{
  -webkit-box-pack: end;
  -webkit-justify-content:flex-end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

/*
* flex布局样式说明
* @example :  flex-row-justify-center
* 四个单词依次为：flex布局 、  主轴方向（水平或者垂直）、  主轴上的对齐方式 、 交叉轴上的对齐方式
*/
.flex-row-justify-center{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: horizontal ;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;

  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}
.flex-row-start-center{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: horizontal ;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: start;
  -webkit-justify-content:flex-start;
  -ms-flex-pack:start;
  justify-content:flex-start;

  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}
.flex-row-center-center{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: horizontal ;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;

  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}
.flex-row-center-start{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: horizontal ;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;

  -webkit-align-items:flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items:flex-start;
}

.flex-column-center-center{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: vertical ;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-pack: center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;

  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}

.flex-column-end-center{
  display:-webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox ;
  display: flex;

  -webkit-box-orient: vertical ;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-pack: end;
  -webkit-justify-content:flex-end;
  -ms-flex-pack:end;
  justify-content:flex-end;

  -webkit-align-items:center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}


